<template>
	<KbBase :scaleMode="scaleMode">
		<template #header>
			<KbHeader @toggleMode="toggleMode" />
		</template>
		<template #body>
			<div class="kb-body-left">
				<div class="kb-body-left-top kb-body-cell">
					<BoxItem :chartData="topFiveRegionOption" title="本期风险排名前五的城市及税负情况" />
				</div>
				<div class="kb-body-left-bottom">
					<BoxItem :chartData="tbrOption" title="期各业态税负及风险情况" />
				</div>
			</div>
			<div class="kb-body-middle">
				<div class="kb-body-middle-top kb-body-cell">
					<BoxItem :is-custom="true" title="本期风险扫描结果">
						<template #body>
							<div class="container">
								<div
									class="box"
									v-for="(item, index) in scanResultOptions"
									:key="index"
									:style="{
										float: 'left',
										width: `${(1 / scanResultOptions.length) * 100}%`,
										height: '100%',
									}">
									<BoxItem :has-border="false" :has-header="false" :chartData="item.option">
										<template #chartDecoration>
											<div class="value">{{ item.value }}</div>
											<div class="name">{{ item.name }}</div>
										</template>
									</BoxItem>
								</div>
							</div>
						</template>
					</BoxItem>
				</div>
				<div class="kb-body-middle-middle kb-body-cell">
					<div class="kb-body-middle-middle-left">
						<BoxItem :chartData="distOption" title="本期税种风险分布情况" />
					</div>
					<div class="kb-body-middle-middle-right">
						<BoxItem :chartData="followOption" title="本期风险跟进情况" />
					</div>
				</div>
				<div class="kb-body-middle-bottom">
					<BoxItem :is-chart="false" title="本期风险排名前十的企业" :table-data="tableOption.tableData" :table-columns="tableOption.tableColumns" />
				</div>
			</div>
			<div class="kb-body-right">
				<div class="kb-body-right-top kb-body-cell">
					<BoxItem :chartData="distOption" title="本期税种风险分布情况" />
				</div>
				<div class="kb-body-right-bottom">
					<BoxItem :is-custom="true" title="本期重点关注风险情况">
						<template #body>
							<div class="container">
								<RiskItem v-for="item in keyFocusOption" :key="item.id" :type="item.type" />
							</div>
						</template>
					</BoxItem>
				</div>
			</div>
		</template>
	</KbBase>
</template>

<script>
import KbBase from '@/pages/dashboard/components/KbBase'
import KbHeader from '@/pages/dashboard/components/KbHeader'
import BoxItem from '@/pages/dashboard/components/BoxItem'
import RiskItem from '@/pages/dashboard/components/RiskItem'
import ToggleMode from '@/pages/dashboard/mixins/toggleMode'
export default {
	name: 'qiy-kb',
	components: {
		RiskItem,
		KbBase,
		BoxItem,
		KbHeader,
	},
	mixins: [ToggleMode],
	data() {
		return {
			// 近半年风险扫描及应对进展设置项
			topFiveRegionOption: {},
			// 近半年税负率与毛利率趋势图设置项
			tbrOption: {},
			// 本期风险扫描结果设置项
			scanResultOptions: [],
			// 本期税种风险分布情况图表设置项
			distOption: {},
			// 本期风险跟进情况图表设置项
			followOption: {},
			// 本期重要风险点
			tableOption: {},
			// 本期缴纳税金分布情况设置项
			distOption2: {},
			// 本期重点关注风险情况
			keyFocusOption: [],
		}
	},

	computed: {},

	created() {
		// left
		this.drawTopFiveRegionChart()
		this.drawTbrChart()
		// middle
		this.drawScanResultChart()
		this.drawFollowChart()
		this.drawDistChart()
		this.initTable()
		// right
		this.initKeyFocus()
	},
	methods: {
		// left
		/**
		 * 绘制本期风险排名前五的城市及税负情况图
		 */
		drawTopFiveRegionChart() {
			this.topFiveRegionOption = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
					},
				},
				grid: {
					left: '14%',
					right: '14%',
					bottom: '15%',
				},
				legend: {
					top: '2%',
				},
				xAxis: [
					{
						type: 'category',
						axisTick: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								color: '#e5e5e5',
							},
						},
						axisLabel: {
							color: '#393939',
						},
						data: ['华北', '华东', '华南', '华中', '华西', '总部'],
					},
				],
				yAxis: [
					{
						type: 'value',
						name: '风险数量',
						position: 'left',
						alignTicks: true,
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							formatter: '{value} 个',
						},
						color: '#000',
					},
					{
						type: 'value',
						name: '综合税负',
						position: 'right',
						alignTicks: true,
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							formatter: '{value} %',
						},
						color: '#000',
					},
				],
				series: [
					{
						name: '风险数量',
						type: 'bar',
						barWidth: '50%',
						data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#50E7FF ', // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#3985FA', // 100% 处的颜色
									},
								],
								global: false, // 缺省为 false
							},
						},
					},
					{
						name: '增值税税负',
						type: 'line',
						yAxisIndex: 1,
						data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7],
						itemStyle: {
							color: '#fac860',
						},
					},
					{
						name: '综合税负',
						type: 'line',
						yAxisIndex: 1,
						data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2],
						itemStyle: {
							color: '#91CC75',
						},
					},
				],
			}
		},
		/**
		 * 绘制近半年税负率与毛利率趋势图
		 */
		drawTbrChart() {
			this.tbrOption = {
				color: ['#FDC827', '#30D98A', '#326DF8'],
				tooltip: {
					trigger: 'axis',
					order: 'seriesDesc',
				},
				legend: {
					top: '5%',
					data: [
						{
							name: '增值税税负率',
							itemStyle: { color: '#326DF8' },
						},
						{
							name: '综合税负率',
							itemStyle: { color: '#30D98A' },
						},
						{
							name: '毛利率',
							itemStyle: { color: '#FDC827' },
						},
					],
				},
				grid: {
					top: '15%',
					left: '8%',
					right: '8%',
					bottom: '6%',
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['2022年01月', '2022年02月', '2022年03月', '2022年04月', '2022年05月', '2022年06月'],
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						name: '毛利率',
						type: 'line',
						stack: 'Total',
						smooth: true,
						showSymbol: false,
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#FDC827', // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#FFF', // 100% 处的颜色
									},
								],
								global: false, // 缺省为 false
							},
						},
						emphasis: {
							focus: 'series',
						},
						data: [16, 24, 20, 16, 18, 34],
					},
					{
						name: '综合税负率',
						type: 'line',
						stack: 'Total',
						smooth: true,
						showSymbol: false,
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#30D98A', // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#FFF', // 100% 处的颜色
									},
								],
								global: false, // 缺省为 false
							},
						},
						emphasis: {
							focus: 'series',
						},
						data: [23, 19, 20, 22, 14, 13],
					},
					{
						name: '增值税税负率',
						type: 'line',
						stack: 'Total',
						smooth: true,
						showSymbol: false,
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#326DF8', // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#FFF', // 100% 处的颜色
									},
								],
								global: false, // 缺省为 false
							},
						},
						emphasis: {
							focus: 'series',
						},
						data: [11, 12, 10, 14, 9, 12],
					},
				],
			}
		},
		// middle
		/**
		 * 绘制本期风险扫描结果图
		 */
		drawScanResultChart() {
			const params = [
				{
					val: 48,
					name: '高风险',
					color: '#FF4D4F',
				},
				{
					val: 68,
					name: '中风险',
					color: '#FAAD14',
				},
				{
					val: 88,
					name: '低风险',
					color: '#326DF8',
				},
			]
			const initOption = ({ val, color }) => {
				const startAngle = 180
				const endAngle = 0
				const splitCount = 20 // 刻度数量
				return {
					tooltip: {
						show: true, // 是否显示提示框，默认为true
					},
					series: [
						{
							// 值外
							type: 'gauge',
							radius: '95%',
							startAngle: (startAngle - endAngle) * (1 - val / 100) + endAngle,
							endAngle: endAngle,
							splitNumber: 1,
							axisLine: {
								show: false,
								lineStyle: {
									width: 3,
									opacity: 0,
								},
							},
							title: { show: false },
							detail: {
								show: false,
							},
							splitLine: { show: false },
							axisTick: {
								length: '30%',
								splitNumber: Math.ceil((1 - val / 100) * splitCount),
								lineStyle: {
									color,
									opacity: 0.36,
									width: 3,
								},
							},
							axisLabel: { show: false },
							pointer: { show: false },
							center: ['50%', '60%'],
							data: [
								{
									value: val / 100,
									name: 'test gauge',
								},
							],
						},
						{
							// 值内
							type: 'gauge',
							radius: '95%',
							startAngle: startAngle,
							endAngle: (startAngle - endAngle) * (1 - val / 100) + endAngle,
							splitNumber: 1,
							axisLine: {
								show: false,
								lineStyle: {
									width: 3,
									opacity: 0,
								},
							},
							title: { show: false },
							detail: { show: false },
							splitLine: { show: false },
							axisTick: {
								length: '30%',
								splitNumber: Math.ceil((val / 100) * splitCount),
								lineStyle: {
									color,
									width: 3,
								},
							},
							axisLabel: { show: false },
							pointer: { show: false },
							itemStyle: {},
							center: ['50%', '60%'],
							data: [
								{
									value: val / 100,
									name: 'test gauge',
								},
							],
						},
						{
							// 点缀
							type: 'gauge',
							radius: '65%',
							startAngle: startAngle,
							endAngle: endAngle,
							splitNumber: 1,
							axisLine: {
								show: false,
								lineStyle: {
									width: 3,
									opacity: 0,
								},
							},
							title: { show: false },
							detail: { show: false },
							splitLine: { show: false },
							axisTick: {
								length: '3%',
								splitNumber: Math.ceil((val / 100) * splitCount),
								lineStyle: {
									color,
									opacity: 0.36,
									width: 3,
								},
							},
							axisLabel: { show: false },
							pointer: { show: false },
							itemStyle: {},
							center: ['50%', '60%'],
							data: [
								{
									value: val / 100,
									name: 'test gauge',
								},
							],
						},
					],
				}
			}
			this.scanResultOptions = params.map(item => ({
				option: initOption(item),
				value: item.val,
				name: item.name,
			}))
		},

		/**
		 * 绘制税种风险分布情况图
		 */
		drawDistChart() {
			this.distOption = {
				tooltip: {
					trigger: 'item',
				},
				legend: {
					orient: 'vertical',
					bottom: '2%',
					left: '2%',
					itemWidth: 18,
					itemHeight: 6,
				},
				series: [
					{
						name: '风险数量',
						type: 'pie',
						radius: ['5%', '90%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
						},
						roseType: 'area',
						data: [
							{ value: 1048, name: '增值税' },
							{ value: 735, name: '企业所得税' },
							{ value: 580, name: '消费税' },
							{ value: 484, name: '印花税' },
							{ value: 300, name: '房产税' },
							{ value: 726, name: '土地使用税' },
							{ value: 182, name: '城市维护建设税' },
							{ value: 972, name: '车辆购置税' },
						],
						left: '20%',
					},
					{
						name: '风险数量',
						type: 'pie',
						radius: ['5%', '10%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
						},
						zlevel: 1,
						emphasis: {
							scale: false,
						},
						// 单独设置该系列tooltip不显示
						tooltip: {
							formatter: ' ',
							borderColor: 'transparent',
							backgroundColor: 'transparent',
							padding: 0,
						},
						data: [
							{
								value: 1048,
								name: '增值税',
								itemStyle: { color: '#FFF', opacity: 0.36 },
							},
						],
						left: '20%',
					},
				],
			}
		},
		/**
		 * 绘制风险跟进情况图
		 */
		drawFollowChart() {
			this.followOption = {
				tooltip: {
					trigger: 'item',
				},
				legend: {
					orient: 'horizontal',
					bottom: '2%',
					width: '90%',
					itemWidth: 18,
					itemHeight: 6,
					textStyle: {
						fontSize: 10,
					},
				},
				series: [
					{
						name: '风险数量',
						type: 'pie',
						radius: ['40%', '80%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center',
						},
						emphasis: {
							label: {
								show: true,
								fontWeight: 'bold',
							},
						},
						labelLine: {
							show: false,
						},
						data: [
							{ value: 1048, name: '未下发' },
							{ value: 735, name: '跟进中' },
							{ value: 580, name: '已反馈' },
							{ value: 484, name: '已关闭' },
						],
						bottom: '5%',
					},
				],
			}
		},
		/**
		 * 初始化本期风险排名前十的企业表格
		 */
		initTable() {
			this.tableOption = {
				tableData: [
					{
						id: 1,
						type: '增值税评估分析指标',
						name: '增值税税负横向比较',
						tips: '增值税税负是企业应缴增值税与其相关税源的比…',
						taxType: '增值税',
					},
					{
						id: 2,
						type: '增值税评估分析指标',
						name: '增值税税负横向比较',
						tips: '增值税税负是企业应缴增值税与其相关税源的比…',
						taxType: '增值税',
					},
					{
						id: 3,
						type: '增值税评估分析指标',
						name: '增值税税负横向比较',
						tips: '增值税税负是企业应缴增值税与其相关税源的比…',
						taxType: '增值税',
					},
					{
						id: 4,
						type: '增值税评估分析指标',
						name: '增值税税负横向比较',
						tips: '增值税税负是企业应缴增值税与其相关税源的比…',
						taxType: '增值税',
					},
					{
						id: 5,
						type: '增值税评估分析指标',
						name: '增值税税负横向比较',
						tips: '增值税税负是企业应缴增值税与其相关税源的比…',
						taxType: '增值税',
					},
					{
						id: 6,
						type: '增值税评估分析指标',
						name: '增值税税负横向比较',
						tips: '增值税税负是企业应缴增值税与其相关税源的比…',
						taxType: '增值税',
					},
					{
						id: 7,
						type: '增值税评估分析指标',
						name: '增值税税负横向比较',
						tips: '增值税税负是企业应缴增值税与其相关税源的比…',
						taxType: '增值税',
					},
					{
						id: 8,
						type: '增值税评估分析指标',
						name: '增值税税负横向比较',
						tips: '增值税税负是企业应缴增值税与其相关税源的比…',
						taxType: '增值税',
					},
				],
				tableColumns: [
					{
						id: 1,
						prop: 'type',
						label: '指标类别',
						width: undefined,
					},
					{
						id: 2,
						prop: 'name',
						label: '风险名称',
						width: '200em',
					},
					{
						id: 3,
						prop: 'tips',
						label: '风险提示',
						width: '200em',
					},
					{
						id: 4,
						prop: 'taxType',
						label: '对应税种',
						width: '100em',
					},
				],
			}
		},
		// right

		/**
		 * 初始化本期排名前十风险点图
		 */
		initKeyFocus() {
			this.keyFocusOption = [
				{ id: 1, type: undefined, value: '增值税税负横向比较' },
				{ id: 2, type: undefined, value: '增值税税负横向比较' },
				{ id: 3, type: 'high', value: '增值税税负横向比较' },
				{ id: 4, type: undefined, value: '增值税税负横向比较' },
				{ id: 5, type: 'low', value: '增值税税负横向比较' },
				{ id: 6, type: 'high', value: '增值税税负横向比较' },
				{ id: 7, type: 'low', value: '增值税税负横向比较' },
				{ id: 8, type: undefined, value: '增值税税负横向比较' },
			]
		},
	},
}
</script>

<style lang="scss" scoped>
.kb-body-cell {
	margin-bottom: 16px;
}
.kb-body-left {
	width: 442px;

	&-top {
		height: 426px;
	}

	&-bottom {
		height: 366px;
	}
}
.kb-body-middle {
	margin: 0 16px;
	width: 797px;

	&-top {
		height: 202px;
		.container {
			width: 100%;
			height: 100%;
			.value {
				position: absolute;
				left: 50%;
				top: 55%;
				transform: translate(-50%, -50%);
				font-size: 1.2em;
			}
			.name {
				position: absolute;
				left: 50%;
				top: 80%;
				transform: translate(-50%, -50%);
				font-size: 1em;
			}
		}
	}

	&-middle {
		display: flex;
		height: 287px;
		&-left {
			flex: 1;
			position: relative;
			margin-right: 16px;
		}
		&-right {
			flex: 1;
		}
	}

	&-bottom {
		height: 286px;
	}
	.chart-box {
		position: relative;
		width: 100%;
		height: 100%;
	}
}
.kb-body-right {
	width: 442px;

	&-top {
		height: 426px;
	}

	&-bottom {
		height: 366px;
		.container {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			box-sizing: border-box;
			padding: 14px 16px 0;
		}
	}
}
</style>
